<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p>
            姓: <input type="text" v-model="firstname">
        </p>
        <p>
            名: <input type="text" v-model="lastname">
        </p>
        <p>
            姓名: <input type="text" v-model="fullname">
        </p>
    </div>
</body>

</html>
<script>
    //  
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                firstname: '',
                lastname: '',
                fullname: ''

            }
        },
        watch: {
            firstname(newvalue, oldvalue) {
                this.fullname = newvalue + this.lastname
            },
            lastname(newvalue) {
                this.fullname = this.firstname + newvalue
            },
            // 如果监听 fullname 会有问题, 当fullname 发生变化的时候, 
            // 该函数要修改 firstname 和 lastname, 而这两个值发生改变, 同时有重新给fullname赋值
            // 又重新重复fullname 侦听器, 又重新给firstname 和lastname 赋值
            // fullname(newvalue) {
            //     console.log(newvalue);
            //     this.firstname = newvalue.substr(0, 1)
            //     this.lastname = newvalue.substr(1)
            // }
        }
    }).mount('#app') 
</script>